<template>
  <div class="accordion" id="accordionExample">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h2 class="mb-0">
          <button
            class="btn btn-link btn-block text-left"
            type="button"
            data-toggle="collapse"
            data-target="#collapseOne"
            aria-expanded="true"
            aria-controls="collapseOne"
          >
            下载安装相关问题
          </button>
        </h2>
      </div>
      <div
        id="collapseOne"
        class="collapse show"
        aria-labelledby="headingOne"
        data-parent="#accordionExample"
      >
        <div class="card-body">
          <download></download>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header" id="headingTwo">
        <h2 class="mb-0">
          <button
            class="btn btn-link btn-block text-left collapsed"
            type="button"
            data-toggle="collapse"
            data-target="#collapseTwo"
            aria-expanded="false"
            aria-controls="collapseTwo"
          >
            活跃度、任务卷轴、直推及达人相关问题
          </button>
        </h2>
      </div>
      <div
        id="collapseTwo"
        class="collapse"
        aria-labelledby="headingTwo"
        data-parent="#accordionExample"
      >
        <div class="card-body">
          <active></active>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h2 class="mb-0">
          <button
            class="btn btn-link btn-block text-left collapsed"
            type="button"
            data-toggle="collapse"
            data-target="#collapseThree"
            aria-expanded="false"
            aria-controls="collapseThree"
          >
            贡献值、阅读值相关问题
          </button>
        </h2>
      </div>
      <div
        id="collapseThree"
        class="collapse"
        aria-labelledby="headingThree"
        data-parent="#accordionExample"
      >
        <div class="card-body">
          <contribution></contribution>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h2 class="mb-0">
          <button
            class="btn btn-link btn-block text-left collapsed"
            type="button"
            data-toggle="collapse"
            data-target="#collapseFoure"
            aria-expanded="false"
            aria-controls="collapseFoure"
          >
            糖果及交易密码相关问题
          </button>
        </h2>
      </div>
      <div
        id="collapseFoure"
        class="collapse"
        aria-labelledby="headingThree"
        data-parent="#accordionExample"
      >
        <div class="card-body">
          <transaction></transaction>
        </div>
      </div>
    </div>
  </div>
</template>

<script>  
import active from "./active";
import download from "./download";
import contribution from "./contribution";
import transaction from "./transaction"; 
export default {
  components: {
    active,
    download,
    contribution,
    transaction,
  },
  data() {
    return {};
  },
  watch: {},
  mounted() {
    // console.log(active);
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.page {
  .nav_container {
    background: #382fba;
    width: 100%;
    height: 74px;
  }

  .context_container {
    margin: 15px auto;
    font-size: 14px;

    .let-nav {
      border: 1px solid #f5f5f5;
      box-shadow: 1px 1px 10px 10px #f6f6f6;

      // max-width:200px;
      > a {
        width: 100%;
        margin: 5px auto;
      }
    }

    .right-content {
      border: 1px solid #f5f5f5;
      box-shadow: 1px 1px 10px 10px #f6f6f6;

      > div {
        padding: 15px;
      }

      h3 {
        margin: 15px;
      }

      .btn-link {
        font-size: 14px;
      }
    }
  }
}
</style>
